<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .class1{
        background: #444;
        color: #eee;
    }
</style>


<div id="app">
    <p>{{ message }}</p>
    <br>
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
    <br>
    <h2>双向输入</h2>
    <p>{{ message }}</p>
    <input v-model="message">
    <br>
    <h2>点击事件</h2>
    <p v-if="seen">你点击了我</p>
    <br>
    <div v-on:click="dianji" >点击</div>
    <br>

    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>

    <br>
    <h2>input取值</h2>
    <input v-model="valuemodel" placeholder="编辑我……">
    <button @click="quzhi">取值</button>

    <br>
    <h2>循环</h2>

    <li v-for="site in sites">
        {{ site.name }}
    </li>

    <br>

    <li v-for="(value, key,index) in object">
        {{ index }} : {{ key }} : {{ value }}
    </li>

    <br>
    <!-- v-bind 使用  -->
    <a v-bind:href="'String'+obj"></a>


</div>

<script src="/js/vue.js"></script>
<script src="/js/vant.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                index: 1,
                message: "这是vue",
                use: false,
                seen: false,
                counter: 1,
                valuemodel:'',
                sites: [
                    { name: 'Runoob' },
                    { name: 'Google' },
                    { name: 'Taobao' }
                ],
                object: {
                    name: '这是名字',
                    url: '这是url',
                    slogan: '这是object'
                }
            }
        },

        methods: {
            dianji:function () {
                this.index++;
                if(this.index%2==0){
                    this.seen = true
                }else {
                    this.seen = false
                }
            },
            quzhi:function () {
                var value=this.valuemodel
                alert(value)
            }
        },

        //vue的监听值改变
        watch: {
            counter: function (val) {
                alert(val) //改变后的值
            }
        }
    })
    app.mount('#app');

</script>
</body>
</html>